import React, { useRef, useEffect, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import './index.css';

interface Iprops{
  lineColor?: string;
  starColor?: string;
  duration?: number;
  children?: React.ReactChildren;
  starLength: string | number;
}

export default ({
  lineColor = '#235fa7',
  starColor = '#4fd2dd',
  duration = 2,
  starLength = 50,
  children
}: Iprops) => {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const [path, setPath] = useState('');
const [uniId, setUniId] = useState({pathId: '', maskId: '', gradientId: ''});
const sizeFlyBox = useRef<HTMLDivElement>(null);

useEffect(() => {
  const { clientWidth, clientHeight } = sizeFlyBox.current as HTMLDivElement;
  const id = uuidv4();
  setUniId({
    pathId: `path-${id}`,
    maskId: `mask-${id}`,
    gradientId: `gradient-${id}`
  })
  console.log(uuidv4());
  setWidth(clientWidth);
  setHeight(clientHeight);
  setPath(`M5 5 L${clientWidth - 5} 5 L${clientWidth - 5} ${clientHeight - 5} L5 ${clientHeight - 5} Z`)
  // M5 5 L395 5 L395 395 L5 395 Z

}, [])
  return <div className='graphic-fly-box' ref={sizeFlyBox}>
    <svg width={width} height={height}>
      <defs>
        <path
          id={uniId.pathId}
          d={path}
          fill='none'
        />
        <mask id={uniId.maskId}>
          <circle r={starLength} cx={0} cy={0} fill={`url(#${uniId.gradientId})`}>
            <animateMotion
              dur={duration}
              path={path}
              rotate={'auto'}
              repeatCount='indefinite'
            />
          </circle>
        </mask>
        <radialGradient
          id={uniId.gradientId}
          cx='50%'
          cy='50%'
          fx='100%'
          fy='50%'
          r='50%'
        >
          <stop offset='0%' stopColor='#fff' stopOpacity={1}></stop>
          <stop offset='100%' stopColor='#fff' stopOpacity={0}></stop>
        </radialGradient>
      </defs>
      <use
        href={`#${uniId.pathId}`}
        strokeWidth={1}
        stroke={lineColor}
      />
      <use
        href={`#${uniId.pathId}`}
        strokeWidth={3}
        stroke={starColor}
        mask={`url(#${uniId.maskId})`}
      />
    </svg>
    <div className='graphic-fly-box-content'>
      {children}
    </div>
  </div>
};


